import React, { useState } from 'react';
import { Card, Form, Input, Button, Select, Row, Col } from 'antd';
// import type { FormInstance } from 'antd/es/form';
import './index.scss'
// 类型定义
interface CompanyInfo {
  phone: string;
  name: string;
  companyName: string;
  legalRepresentative: string;
  companyType: string;
  province: string;
  city: string;
  district: string;
  businessArea: string;
  companyDesc: string;
  email: string;
  idNumber: string;
  socialCreditCode: string;
  contact: string;
  address: string;
  website: string;
  businessScope: string;
}

const initialValues: CompanyInfo = {
  phone: '131****8888',
  name: 'koto',
  companyName: '131****8888',
  legalRepresentative: '张三',
  companyType: '国企',
  province: '四川省',
  city: '成都市',
  district: '高新区',
  businessArea: '仓储',
  companyDesc: '请输入企业简介',
  email: '535906908@qq.com',
  idNumber: '610108199203122222',
  socialCreditCode: '9510YGFTMNEG1986',
  contact: '131****8881',
  address: '请输入详细地址',
  website: '请输入企业网址',
  businessScope: '请输入经营范围'
};
export default function Index() {
  const [form] = Form.useForm<CompanyInfo>();
  const [isEditing, setIsEditing] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleSave = async () => {
    try {
      setLoading(true);
      const values = await form.validateFields();
      console.log('保存数据:', values);
      // 这里添加保存逻辑
      setIsEditing(false);
    } catch (err) {
      console.error('验证失败:', err);
    } finally {
      setLoading(false);
    }
  };

  const handleCancel = () => {
    form.resetFields();
    setIsEditing(false);
  };

  return (
    <Card 
      title="企业信息管理"
      extra={
        !isEditing ? (
          <Button type="primary" onClick={() => setIsEditing(true)}>
            编辑
          </Button>
        ) : (
          <Row gutter={16}>
            <Col>
              <Button onClick={handleCancel}>取消</Button>
            </Col>
            <Col>
              <Button type="primary" loading={loading} onClick={handleSave}>
                保存
              </Button>
            </Col>
          </Row>
        )
      }
    >
      <Form
        form={form}
        initialValues={initialValues}
        layout="vertical"
        disabled={!isEditing}
      >
        <h3>联系人信息</h3>
        <Row gutter={24}>
          <Col span={8}>
            <Form.Item label="*手机号" name="phone" rules={[{ required: true }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="*姓名" name="name" rules={[{ required: true }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>

        <h3>公司信息</h3>
        <Row gutter={24}>
          <Col span={8}>
            <Form.Item label="*企业名称" name="companyName" rules={[{ required: true }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="*法定代表人" name="legalRepresentative" rules={[{ required: true }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="*企业类型" name="companyType" rules={[{ required: true }]}>
              <Select
                options={[
                  { value: '国企', label: '国企' },
                  { value: '民企', label: '民营企业' },
                  { value: '外企', label: '外资企业' },
                  { value: '合资', label: '合资企业' },
                ]}
              />
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={24}>
          <Col span={8}>
            <Form.Item label="*注册地址" required>
              <Row gutter={8}>
                <Col span={8}>
                  <Form.Item name="province" noStyle rules={[{ required: true }]}>
                    <Select placeholder="省" options={[{ value: '四川省', label: '四川省' }]} />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item name="city" noStyle rules={[{ required: true }]}>
                    <Select placeholder="市" options={[{ value: '成都市', label: '成都市' }]} />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item name="district" noStyle rules={[{ required: true }]}>
                    <Select placeholder="区" options={[{ value: '高新区', label: '高新区' }]} />
                  </Form.Item>
                </Col>
              </Row>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="*业务领域" name="businessArea" rules={[{ required: true }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={24}>
          <Col span={24}>
            <Form.Item label="*企业介绍" name="companyDesc" rules={[{ required: true }]}>
              <Input.TextArea rows={3} />
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={24}>
          <Col span={8}>
            <Form.Item label="*邮箱" name="email" rules={[{ type: 'email', required: true }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="*身份证号码" name="idNumber" rules={[{ required: true }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={24}>
          <Col span={8}>
            <Form.Item label="*统一社会信用代码" name="socialCreditCode" rules={[{ required: true }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="*联系方式" name="contact" rules={[{ required: true }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={24}>
          <Col span={24}>
            <Form.Item label="*详细地址" name="address" rules={[{ required: true }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={24}>
          <Col span={8}>
            <Form.Item label="企业网址" name="website">
              <Input />
            </Form.Item>
          </Col>
          <Col span={16}>
            <Form.Item label="经营范围" name="businessScope">
              <Input.TextArea rows={2} />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Card>
  );
};
